// 光影玻璃页面样式
.light-glass-page {
  height: calc(100vh - 200px);
  min-height: 700px;
  box-sizing: border-box;
  overflow: hidden;
  overflow-y: auto;
  padding: 24px;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 30%, #16213e 70%, #0f0f23 100%);
  
  .light-glass-content {
    height: 100%;
    
    // 自定义滚动条
    &::-webkit-scrollbar {
      width: 8px;
    }
    
    &::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 4px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.3);
      border-radius: 4px;
      
      &:hover {
        background: rgba(255, 255, 255, 0.5);
      }
    }
  }

  .light-glass-header {
    margin-bottom: 32px;
    
    .header-card {
      text-align: center;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      backdrop-filter: blur(20px);
      
      .ant-card-body {
        padding: 32px;
      }
      
      .ant-typography h1 {
        background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);
        font-weight: 300;
        letter-spacing: 2px;
      }
    }
  }

  // 光源控制面板
  .light-control-panel {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    backdrop-filter: blur(20px);
    position: sticky;
    top: 24px;
    
    .ant-card-head {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px 16px 0 0;
      
      .ant-card-head-title {
        color: rgba(255, 255, 255, 0.9);
        font-weight: 600;
      }
    }

    .ant-card-body {
      padding: 24px;
    }

    .current-light-info {
      text-align: center;
      padding: 20px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      
      .light-icon {
        margin-bottom: 12px;
        
        span {
          display: inline-block;
          padding: 12px;
          border-radius: 50%;
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
          box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
          animation: lightPulse 2s ease-in-out infinite;
        }
      }
      
      h4 {
        color: rgba(255, 255, 255, 0.9) !important;
      }
    }

    .light-controls {
      .control-item {
        margin-bottom: 20px;
        
        .ant-typography {
          color: rgba(255, 255, 255, 0.8);
          margin-bottom: 8px;
        }
        
        .ant-slider {
          .ant-slider-rail {
            background: rgba(255, 255, 255, 0.2);
            height: 6px;
            border-radius: 3px;
          }
          
          .ant-slider-track {
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 100%);
            height: 6px;
            border-radius: 3px;
          }
          
          .ant-slider-handle {
            width: 18px;
            height: 18px;
            background: rgba(255, 255, 255, 0.9);
            border: 2px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
            
            &:hover, &:focus {
              background: rgba(255, 255, 255, 1);
              box-shadow: 0 4px 12px rgba(255, 255, 255, 0.4);
            }
          }
          
          .ant-slider-mark-text {
            color: rgba(255, 255, 255, 0.6);
            font-size: 11px;
          }
        }

        .ant-select {
          .ant-select-selector {
            background: rgba(255, 255, 255, 0.1) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            border-radius: 8px !important;
            color: rgba(255, 255, 255, 0.9) !important;
            
            &:hover {
              background: rgba(255, 255, 255, 0.15) !important;
              border-color: rgba(255, 255, 255, 0.3) !important;
            }
          }
          
          &.ant-select-focused .ant-select-selector {
            background: rgba(255, 255, 255, 0.2) !important;
            border-color: rgba(255, 255, 255, 0.4) !important;
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
          }
          
          .ant-select-arrow {
            color: rgba(255, 255, 255, 0.7);
          }
        }

        .ant-switch {
          &.ant-switch-checked {
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 100%);
          }
        }
      }
    }

    .quick-actions {
      .ant-btn {
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: rgba(255, 255, 255, 0.9) !important;
        border-radius: 8px;
        
        &:hover {
          background: rgba(255, 255, 255, 0.2) !important;
          border-color: rgba(255, 255, 255, 0.3) !important;
          transform: translateY(-1px);
        }
        
        &.ant-btn-primary {
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.3) 100%) !important;
          border-color: rgba(255, 255, 255, 0.3) !important;
        }
      }
    }

    .season-info {
      padding: 16px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      
      h5, .ant-typography {
        color: rgba(255, 255, 255, 0.9) !important;
      }
    }
  }

  // 玻璃展示区域
  .glass-display-area {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    min-height: 600px;
    
    .ant-card-body {
      padding: 0;
      height: 600px;
      border-radius: 16px;
      overflow: hidden;
    }
    
    .glass-container {
      position: relative;
      width: 100%;
      height: 100%;
      background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.3) 100%);
      cursor: none; // 隐藏鼠标指针，因为有自定义光源
      
      .usage-hint {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.6);
        padding: 8px 16px;
        border-radius: 20px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        pointer-events: none;
      }
    }
  }

  // 底部说明卡片
  .ant-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    backdrop-filter: blur(20px);
    
    .ant-card-head {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      
      .ant-card-head-title {
        color: rgba(255, 255, 255, 0.9);
        font-weight: 600;
      }
    }
    
    .ant-card-body {
      h4 {
        color: rgba(255, 255, 255, 0.9) !important;
        margin-bottom: 8px;
      }
      
      .ant-typography {
        color: rgba(255, 255, 255, 0.7) !important;
        line-height: 1.6;
      }
    }
  }
}

// 光源脉动动画
@keyframes lightPulse {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 6px 25px rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
  }
}

// 季节特定样式
.season-spring.light-glass-page {
  background: linear-gradient(135deg, #0a1a0a 0%, #1a2e1a 30%, #162116 70%, #0f230f 100%);
}

.season-summer.light-glass-page {
  background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 30%, #162130 70%, #0f0f23 100%);
}

.season-autumn.light-glass-page {
  background: linear-gradient(135deg, #1a0a0a 0%, #2e1a1a 30%, #301621 70%, #230f0f 100%);
}

.season-winter.light-glass-page {
  background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 30%, #1a1630 70%, #0f0f23 100%);
}

// 响应式设计
@media (max-width: 1200px) {
  .light-glass-page {
    .light-control-panel {
      position: static;
      margin-bottom: 24px;
    }
  }
}

@media (max-width: 768px) {
  .light-glass-page {
    padding: 16px;
    
    .light-glass-header .header-card .ant-card-body {
      padding: 20px;
    }
    
    .light-control-panel .ant-card-body {
      padding: 16px;
    }
    
    .glass-display-area {
      min-height: 400px;
      
      .ant-card-body {
        height: 400px;
      }
    }
  }
}

@media (max-width: 480px) {
  .light-glass-page {
    padding: 12px;
    
    .glass-display-area {
      min-height: 300px;
      
      .ant-card-body {
        height: 300px;
      }
    }
  }
}

// 性能优化
@media (prefers-reduced-motion: reduce) {
  .light-glass-page {
    .current-light-info .light-icon span {
      animation: none;
    }
  }
}
